{extend name="base"}
{block name="style"}
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key={:config('setting.qqmap_ak')}"></script>
<script type="text/babel" src="{:_static()}/components/qqMap.js"></script>
<link rel="stylesheet" href="{:_static()}/wsvue/index.css">
<script type="text/babel" src="{:_static()}/wsvue/excel/index.js"></script>
<script type="text/babel" src="{:_static()}/wsvue/model/index.js"></script>
<script type="text/babel" src="{:_static()}/components/wsSource.js"></script>

{/block}

{block name="main"}
<div id="app" v-cloak>
	<el-row>
	  	<el-col :xs="10" :sm="10" :md="10" :lg="6" style="min-width: 300px;">
	  		<div class="task-nav m_t15">
	  			<div class="task-nav-item" v-for="item in taskNav">
	  				<h2 class="title">{{item.title}}</h2>
	  				<div class="main">
	  					<span 
	  						:class="['ws-button',item.id==taskActive[0]&&v.id==taskActive[1]?'active':'']"
	  						@click="checkNav(item,v)" 
	  						v-for="v in item.taskoptionspc">
	  					{{v.title}}
	  					</span>
	  				</div>
	  			</div>
	  		</div>
	  	</el-col>
	  	<el-col :xs="14" :sm="14" :md="14" :lg="12"  class="task-main p_x20" v-if="currentTask">
	  		<!-- 设备、微信、好友选择 start -->
	  		<el-row class="task-item" v-if="func('device')">
	  			<el-row class="title">
	  				<el-col :span="5" class="h4">设备选择</el-col>
	  				<el-col :span="19">在线设备</el-col>
	  			</el-row>
	  			<el-row class="main">
	  				<el-tree
	  				  :data="data2"
	  				  show-checkbox
	  				  node-key="id"
	  				  @check="checkTree"
	  				  :props="defaultProps">
	  				</el-tree>
	  			</el-row>
	  		</el-row>
	  		<!-- 设备、微信、好友选择 end -->
			
			<!-- 任务标题 start -->
	  		<div class="task-item" v-if="func('title')">
	  			<el-row class="title">
	  				<el-col :span="5" class="h4">任务标题</el-col>
	  				<el-col :span="19">
	  					<el-input 
	  						v-model="data.title" 
	  						size="small"
	  						style="width:100%"
	  						:placeholder="val('title')">
  						</el-input>
	  				</el-col>
	  			</el-row>
	  		</div>
	  		<!-- 任务标题 end -->

	  		<!-- 时间选择 start -->
	  		<div class="task-item" v-if="func('starttime')">
	  			<el-row class="title">
	  				<el-col :span="5" class="h4">时间选择</el-col>
	  				<el-col :span="19">
  					    <el-checkbox v-model="data.nowstart" :label="1">
  					    	立即执行（加入队列）
  						</el-checkbox>
	  				</el-col>
	  			</el-row>
	  			<el-row class="main" v-if="!data.nowstart">
	  				<el-col :span="12" v-if="!data.loop">
	  					<el-date-picker
  					      v-model="data.starttime"
  					      type="date"
  					      value-format="yyyy-MM-dd"
  					      placeholder="选择日期">
  					    </el-date-picker>
	  				</el-col>
	  				<el-time-picker
	  				    v-model="data.runtime"
	  				    value-format="HH:mm:ss"
	  				    placeholder="时间选择"
	  				    arrow-control>
	  				</el-time-picker>
	  			</el-row>
	  		</div>
	  		<!-- 时间选择 end -->
			
			<!-- 主体内容 start -->
	  		<div class="task-item" v-if="hasMain">
	  			<el-row class="title">
	  				<el-col :span="5" class="h4">主体内容</el-col>
	  				<el-col :span="19">
	  					<el-button type="primary" size="mini" v-if="func('source')" @click="wsSource=true">选择素材</el-button>
	  				</el-col>
	  			</el-row>
	  			<el-row class="main">
	  				<el-form label-width="110px">
	  				    
	  				    <el-form-item :label="val('sex','title')" v-if="func('sex')">
	  				    	<el-radio-group v-model="data.sex">
	  				    	    <el-radio label="0">女</el-radio>
	  				    	    <el-radio label="1">男</el-radio>
	  				    	</el-radio-group>
	  				    </el-form-item>

	  				    <el-form-item :label="val('sign','title')" v-if="func('sign')">
	  				    	<el-input type="textarea" 
	  				    		v-model="data.sign" 
	  				    		:autosize="{minRows:4}"
	  				    		@focus="multitermShow(val('sign','title'),data.sign,'sign')"
	  				    		:placeholder="val('sign')">
	  				    			
	  				    	</el-input>
	  				    </el-form-item>

	  				    <el-form-item :label="val('limit','title')" v-if="func('limit')">
	  				    	<el-input-number type="textarea" 
	  				    		v-model="data.limit" 
	  				    		:min="0">
	  				    			
	  				    	</el-input-number>
	  				    </el-form-item>

	  				    <el-form-item :label="val('count','title')" v-if="func('count')">
	  				    	<el-input-number type="textarea" 
	  				    		v-model="data.count" 
	  				    		:min="0">
	  				    			
	  				    	</el-input-number>
	  				    </el-form-item>
	  				    <el-form-item :label="val('offset','title')" v-if="func('offset')">
	  				    	<el-input-number type="textarea" 
	  				    		v-model="data.offset" 
	  				    		:min="0">
	  				    			
	  				    	</el-input-number>
	  				    </el-form-item>
	  				    <el-form-item :label="val('index','title')" v-if="func('index')">
	  				    	<el-input-number type="textarea" 
	  				    		v-model="data.index" 
	  				    		@change="indexChange"
	  				    		:min="0">
	  				    			
	  				    	</el-input-number>
	  				    </el-form-item>

	  				    <el-form-item :label="val('indexEnd','title')" v-if="func('indexEnd')">
	  				    	<el-input-number type="textarea" 
	  				    		v-model="data.indexEnd" 
	  				    		:min="data.index">
	  				    			
	  				    	</el-input-number>
	  				    </el-form-item>

						<el-form-item :label="val('nickname','title')" v-if="func('nickname')">
							<el-input type="textarea" 
								v-model="data.nickname" 
								:autosize="{minRows:4}"
								@focus="multitermShow(val('nickname','title'),data.nickname,'nickname')"
								:placeholder="val('nickname')">
									
							</el-input>
							<el-button type="primary" v-if="val('nickname','mine')" size="mini" @click="showImportMine('nickname')">昵称选择</el-button>
						</el-form-item>

	  				    <el-form-item :label="val('number','title')" v-if="func('number')">
	  				    	<el-input type="textarea" 
	  				    		v-model="data.number" 
	  				    		:autosize="{minRows:4}"
	  				    		@focus="multitermShow(val('number','title'),data.number,'number')"
	  				    		:placeholder="val('number')">
	  				    			
	  				    	</el-input>
	  				    	<el-button type="primary" v-if="val('number','mine')" size="mini" @click="showImportMine('number')">账号库</el-button>
	  				    	<el-button type="primary" v-if="val('number','excel')==='true'" size="mini" @click="show=true">导入Excel</el-button>
	  				    </el-form-item>
						<el-form-item :label="val('msg','title')" v-if="func('msg')">
							<el-input type="textarea" 
								v-model="data.msg" 
								:autosize="{minRows:4}"
								@focus="multitermShow(val('msg','title'),data.msg)"
								:placeholder="val('msg')">
									
							</el-input>
						</el-form-item>

						
	  				    <el-form-item label="选择地图" v-if="func('map')">
	  				    	<el-input 
		  						v-model="data.address" 
		  						size="small"
		  						style="width:100%"
		  						readonly
		  						placeholder="地址">
	  						</el-input>
	  						<el-input 
		  						v-model="data.lat" 
		  						size="small"
		  						style="width:45%"
		  						readonly
		  						placeholder="lat">
		  						<template slot="prepend">lat</template>
	  						</el-input>
	  						<el-input 
		  						v-model="data.lng" 
		  						size="small"
		  						style="width:45%"
		  						readonly
		  						placeholder="lng">
		  						<template slot="prepend">lng</template>
	  						</el-input>
	  						<el-input 
	  							v-if="data.city&&data.city.length"
		  						v-model="data.city" 
		  						size="small"
		  						style="width:45%"
		  						readonly
		  						placeholder="城市">
		  						<template slot="prepend">城市</template>
	  						</el-input>
	  						<el-button type="primary" size="mini" @click="qqMap=true">点击选择地图</el-button>
	  				    </el-form-item>

	  				    <el-form-item :label="val('media','title')" v-if="func('media')">
	  				    	<el-upload
	  				    	  action="{:url('loads')}"
	  				    	  :before-upload="handleBeforeUpload"
	  				    	  :before-remove="handleBeforeRemove"
	  				    	  :on-change="handleOnChange"
	  				    	  :on-success="handleSuccess"
	  				    	  :file-list="fileList"
	  				    	  :list-type="data.media.type==='video'?'text':'picture-card'">
	  				    	  <el-button size="small" type="primary">{{val('media','title')}}</el-button>
	  				    	  <div slot="tip" class="el-upload__tip">
	  				    	  	<span v-if="data.media.type==='video'" style="color: #f00; font-size: 14px;">
	  				    	  		<template v-if="data.__name=='ftw2'">
	  				    	  			请上传10s以内的视频文件
	  				    	  		</template>
	  				    	  	</span>
	  				    	  	<span v-else-if="data.media.type==='audio'" style="color: #f00; font-size: 14px;">
	  				    	  		请上传10s以内的音频文件
	  				    	  	</span>
	  				    	  	<template v-else>
	  				    	  		最多仅可上传{{data.media.mult}}个文件
	  				    	  	</template>
	  				    	  </div>
	  				    	</el-upload>
	  				    </el-form-item>
	  				</el-form>
	  			</el-row>
	  		</div>
	  		<!-- 主体内容 end -->

	  		<el-row class="m_t20">
	  			<el-button type="primary" @click="onSubmit(null,'{:url('')}')">创建任务</el-button>
	  		</el-row>
	  	</el-col>
	</el-row>

	<!-- 多项新增格式 start -->
	<ws-multiterm 
		:title="multitermTitle"
		v-model="multitermValue"
		:options="multitermOptions"
		@end="multitermEnd"
		:text.sync="multitermText">
	</ws-multiterm>
	<!-- 多项新增格式 end -->

	<!-- 素材选择区域 start -->
	<ws-source
		v-model="wsSource"
		:source.sync="source"
		:cate="cate"
		:cateid.sync="cate_id"
		:images-prefix="imagesPrefix"
		source-url="{:url('source/getSources')}"
		audio-png="{:_static()}/images/audio.png"
		@check="checkSource"
	></ws-source>
	<!-- 素材选择区域 end -->

	<!-- 打开腾讯地图 start -->
	<ws-qqmap v-model="qqMap" 
		location-url="{:url('index/Api/qqLocation')}" 
		citys-url="{:url('index/Api/citys')}" 
		:default-latlng="latLng"
		@check="checkQQMapAddress">
	</ws-qqmap>
	<!-- 打开腾讯地图 end -->

	<!-- 导入我的账号（添加好友） start -->
	<el-dialog
	  :title="mineTitle"
	  :visible.sync="visibleMine"
	  width="70%">
	  	<template v-if="software.length">
		  	<el-checkbox :indeterminate="isIndeterminate" v-model="mineCheckAll" @change="mineCheckAllChange">全选</el-checkbox>
		  	<el-button @click="mineCheck15Change" size="mini" type="success" class="ws-mini" v-if="software.length>15">选择15个</el-button>
		  	<el-button @click="mineRemove15Change" size="mini" type="danger" class="ws-mini" v-if="checkedSoft.length&&software.length>15">移除15个</el-button>
		    <div style="margin: 15px 0;"></div>
		    <el-checkbox-group v-model="checkedSoft" @change="mineCheckedChange">
		      <el-checkbox v-for="item in software" :label="item" :key="item">{{item}}</el-checkbox>
		    </el-checkbox-group>
	    </template>
	    <template v-else>暂无账号</template>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="showImportMine(importMineKey,false)">取 消</el-button>
	    <el-button type="primary" @click="showImportMine(importMineKey,false,true)">确 定</el-button>
	  </span>
	</el-dialog>
	<!-- 导入我的账号（添加好友） end -->

	<!-- 导入Excel Vuejs区域 -->
	<ws-excel 
		:area="area" 
		:title="title" 
		:show-type="showType"
		:options="options" 
		v-model="show" 
		@ext-error="error" 
		@change="change">
			
	</ws-excel>
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script type="text/babel" type="text/javascript">
const app=new Vue({
	el:'#app',
	mixins:[wsMixins],
	data:{
		data:{}, //
		data2:[], //用户设备选择数据
		taskActive:[],
		taskNav:{$taskgroup->toJson()|raw},
		devs:[],
		devsTree:[],
		currentTask:null, //当前选择的任务
		defaultProps: {
          children: 'children',
          label: 'name'
        },
		
        // 多行文本输入框
        multitermValue:false,
        multitermTitle:' ',
        multitermOptions:'',
        multitermText:'',
        multitermKey:null,


        // 素材选择
        wsSource:false,
        source:{$source|raw},
        cate:{$cate|raw}, //所有的素材分组
        imagesPrefix:"{:images('')}",
        cate_id:{$cate_id}, //当前筛选的分组ID

        // 腾讯地图组件数据
        qqMap:false, //是否显示地图选择框
        latLng:[],

        //导入我的账号
        mineTitle:'我名下的账号',
        importMineKey:'number',
        isIndeterminate:false,
        visibleMine:false,
        mineCheckAll:false, //是否全选
        software:[],
        checkedSoft:[],

        // 导入组件数据
        options:['微信号、QQ号、手机号'],
        show:false,
        showType:false,
        title:'导入QQ号',
        area:['450','400'],

        // 文件上传
        fileList: [],
        
	},
	created(){
		//this.emptyData();
		this.init();
	},
	watch:{
		// 用户设备选择数据
		devsTree(val){
			this._updateDevsTree(val);
		}
	},
	computed:{
		// 是否包含内容主体
		hasMain(){
			let option=['msg','number','number','address','media','count','limit','interval','sex','nickname','offset','index','indexEnd'],
			data=this.data;
			let rs =option.some(item=>{
				return data[item]!==undefined;
			});
			console.log(rs)
			return rs;
		},
		
	},
	methods:{
		indexChange(index){
			let data=this.data;
			if(typeof data.indexEnd !=='undefined'&&data.indexEnd<index){
				data.indexEnd=index;
			}
		},
		init(){
			// 获取在线设备
			socket.on('getUsers',data=>{
			    this.devs=data;
			    if(data.length){
			    	this._getDevices(data);
			    }else{
			    	this.devsTree=[];
			    }
			})
			socket.emit('getUsers',{});
		},
		_getDevices(ids){
			if(!ids)return;
			this._wspost("{:url('getDevicesTree')}",{ids},res=>{
				if(res&&res.data){
					let data=res.data;
					if(typeof data==='string'){
						data=JSON.parse(data);
					}
					this.devsTree=data;
				}
			},false);
		},
		_updateDevsTree(val){
			val=val||this.devsTree;
			let data2=[],
				data=this.data;
			if(!val.length){
				this.data2=[];
				return;
			}
			if(data.social!==undefined){ //允许选择微信好友
				val.forEach(d=>{
					let item=[];
					d.software.forEach(soft=>{
						let row=[];
						soft.social.forEach(s=>{
							row.push({id:s.id,name:s.name,key:'social'});
						})
						item.push({id:soft.id,name:soft.name,children:row,key:'software'});
					})
					data2.push({id:d.id,name:d.name,children:item,key:'device'});
				})
			}else if(data.software!==undefined){ //允许选择用户微信号
				val.forEach(d=>{
					let item=[];
					d.software.forEach(soft=>{
						item.push({id:soft.id,name:soft.name,key:'software'})
					})
					data2.push({id:d.id,name:d.name,children:item,key:'device'});
				})
			}else{
				val.forEach(d=>{
					data2.push({id:d.id,name:d.name,key:'device'});
				})
			}
			this.data2=data2;
		},
		
		checkNav(group,task){
			this.taskActive=[group.id,task.id];
			let params=JSON.parse(task.params);
			this.currentTask=params;
			let data={};
			for(let i in params){
				let item=params[i];
				if(i==='map'){
					data.city='';
					data.address='';
					data.lat='';
					data.lng='';
				}else if(i==='loop'){
					data.loop=item.show==='true';
				}else if(i==='media'){
					data.media={
						type:item.media_type.val,
						mult:item.mult==='true'?9:1,
					};
				}else{
					data[i]=item.default?item.default:'';
				}
				
			}
			data.event=group.event;
			data.action=task.action;
			data.__name=task.name;
			let date=this.wsDate();
			data.starttime=`${date[0]}-${date[12]}-${date[2]}`;
			data.runtime=`${date[3]}:${date[4]}:${date[5]}`;
			this.emptyData(data);
			this._updateDevsTree();
			this._initWsExcel(task.name);
			console.log(task.params,this.data)
		},
		// 选择设备账号
		checkTree(data2,{checkedNodes,halfCheckedNodes}){
			let checkNodes=[...checkedNodes,...halfCheckedNodes];
			let data=this.data;
			if(data.device!==undefined){
				data.device=[];
			}
			if(data.software!==undefined){
				data.software=[];
			}
			if(data.social!==undefined){
				data.social=[];
			}
			checkNodes.forEach(item=>{
				if(['device','software','social'].indexOf(item.key)>-1&&Array.isArray(data[item.key])){
					data[item.key].push(item.id);
				}
			})
		},
		// 初始化表单数据
		emptyData(data={}){
			//let date=new Date();
			this.data=Object.assign({
				source_id:0,
				loop:0,
				nowstart:0,
				// starttime:date,
				// runtime:date,
				files:[],
				_ids:[],
			},data);
		},
		//设置属性
		_setData(key,val){
			if(!key){
				return;
			}
			if(typeof this.data[key]!=='undefined'){
				this.data[key]=val;
			}
		},
		//打开多行文本框(多行文本格式化输入功能)
		multitermShow(title,val,key='msg'){
			if(this.val(key,'mult')==='false'){
				// 未开启多行输入格式
				return ;
			}
			title=this.defaultVal(this.val(key,'title'),title);
			this.multitermTitle=title;
			this.multitermOptions=title;
			this.multitermText=val;
			this.multitermKey=key;
			this.multitermValue=true;
		},
		// 多行文本输入框完成事件(多行文本格式化输入功能)
		multitermEnd(val,options){
			this.data[this.multitermKey]=val;
		},
		// 查询任务是否开启 key 值的功能
		func(key){
			let currentTask=this.currentTask;
			return currentTask[key]&&currentTask[key].show==='true';
		},
		// 获取功能属性值
		val(key,i='placeholder'){
			let currentTask=this.currentTask;
			if(currentTask[key]&&currentTask[key][i]){
				return currentTask[key][i];
			}
			return '';
		},
		// 腾讯地图组件 确定选择 地址事件(地图选择功能)
		checkQQMapAddress(data){
			this._setData('city',data.city);
			this._setData('address',data.address);
			this._setData('lat',data.latLng.lat);
			this._setData('lng',data.latLng.lng);
		},
		// 素材选择 用户选中(选择素材功能)
		checkSource(data){
			let row=data.row;
			this._setData('source_id',row.id);
			this._setData('msg',row.msg);
			this._setData('number',row.number);
			this._setData('nickname',row.nickname);
			this._setData('sign',row.sign);
			if(row.count>0){
				this._setData('count',row.count);
			}
			if(row.limit>0){
				this._setData('limit',row.limit);
			}
			console.log(row)
			// 地图
			if(row.map){
				this.latLng=[row.map.lat,row.map.lng];
				this.checkQQMapAddress({
					city:row.map.city,
					address:row.map.address,
					latLng:{
						lat:row.map.lat,
						lng:row.map.lng,
					},
				});
			}
			// 图片
			this.fileList=data.fileList;
			this.wsSource=false;
		},
		// 显示关闭导入我的账号框(导入我的账号功能)
		showImportMine(key,isShow=true,isEnd=false){
			if(key){
				this.importMineKey=key;
			}else{
				key=this.importMineKey
			}
			if(isShow){
				this.software=[];
				let checkedSoft=this.data[key].split('|');
				this.checkedSoft=checkedSoft.filter(item=>{
					return item&&item.length>0;
				});
				let mine=this.val(key,'mine');
				let url="{:url('getMineSoft')}";
				this.mineTitle='我名下的账号';
				if(mine.val==='weixin'){
					url="{:url('getMineWX')}";
					this.mineTitle='账号库中的微信号';
				}else if(mine.val==='tel'){
					url="{:url('getMineTel')}";
					this.mineTitle='账号库中的未查询手机号';
				}else if(mine.val==='wxGroup'){
					url="{:url('getMineWxGroup')}?soft="+JSON.stringify(this.data.software)+"&devs="+JSON.stringify(this.devs);
					this.mineTitle='我的群组';
				}else if(mine.val==='social'){
					url="{:url('getMineSocial')}?soft="+JSON.stringify(this.data.software)+"&devs="+JSON.stringify(this.devs);
					this.mineTitle='我的好友';
				}
				this._wsget(url,res=>{
					if(res.data){
						this.software=res.data;
					}
				});
			}else if(isEnd){
				//点击确定选择
				this.data[key]=this.checkedSoft.join('|');
				if(this.data._ids.indexOf(key)===-1){
					this.data._ids.push(key);
				}
			}

			this.visibleMine=isShow;
		},

		// 全选\取消我的名下账号(导入我的账号功能)
		mineCheckAllChange(val) {
	        this.checkedSoft = val ? this.software : [];
	        this.isIndeterminate = false;
	    },
	    mineCheck15Change(){
	    	let software=this.software;
	    	let l=this.checkedSoft.length;
	    	this.checkedSoft.push(...software.slice(l,l+15));
	    	
	    	// 全选按钮状态变化
	    	l=this.checkedSoft.length;
	    	if(l===software.length){
	    		this.isIndeterminate = false;
	    		this.mineCheckAll=true;
	    	}else if(l){
	    		this.isIndeterminate = true;
	    	}
	    },
	    mineRemove15Change(){
	    	let l=this.checkedSoft.length;
	    	if(l){
	    		this.checkedSoft.splice(-15);

	    		// 全选按钮状态变化
	    		if(this.mineCheckAll){
	    			this.mineCheckAll=false;
	    			if(l>15){
	    				this.isIndeterminate = true;
	    			}
	    		}
	    		if(l<=15){
    				this.isIndeterminate = false;
    			}
	    	}
	    	
	    },
	    // 选择我的名下账号(导入我的账号功能)
      	mineCheckedChange(value) {
        	let checkedCount = value.length;
        	this.mineCheckAll = checkedCount === this.software.length;
        	this.isIndeterminate = checkedCount > 0 && checkedCount < this.software.length;
      	},
      	// 初始化导入框标题(导入Excel功能)
      	_initWsExcel(name){
      		if(name==='tjhy'){ // 添加好友(导入QQ号)
  				this.options=['微信号、QQ号、手机号'];
  				this.title='导入QQ号';
  				this.showType=true;
      		}else if(name==='gzgzh'){ // 关注微信公众号
      			this.options=['微信公众号名称'];
      			this.title='导入微信公众号名称';
      			this.showType=false;
      		}else if(name==='cxsjhsfwx'){ //查询手机号是否微信
      			this.options=['手机号码'];
      			this.title='查询手机号是否微信';
      			this.showType=false;
      		}
      	},
      	// 导入账号(导入Excel功能)
      	change(data){
			let numberStr=this._format(data);
			this.data.number=numberStr;
			this.show=false;
		},
		// 导入账号(导入Excel功能)
		error(ext){
			this.$message({
				type:'warning',
				message:'错误的文件后缀名：'+ext
			})
		},
		// 格式化(导入Excel功能)
		_format(data){
			let rs=[];
			data.forEach(item=>{
				if(item[0])rs.push(item[0]);
			});
			return rs.join('|')
		},
		//文件列表移除文件时的钩子（上传媒体文件功能）
		handleBeforeRemove(file, fileList) {
			let id;
			if(file.id){
				id=file.id;
			}else if(file.response&&file.response.data&&file.response.data.id){
				id=file.response.data.id;
			}
			if(id&&!file.isSource){
				this._wspost("{:url('delMedia')}",{id},res=>{
					if(res.status===0){
						this._removeFile(file);
					}
				},false);
			}else{
				this._removeFile(file);
			}
        	return false;
	    },
	    // 文件上传（上传媒体文件功能）
        handleBeforeUpload(file){
        	console.log('BeforeUpload')
        	if(file.type.indexOf(this.data.media.type)===-1){
        		this.$message({
        			type:'warning',
        			message:'不支持的文件类型',
        		})
        		this._removeFile(file);
        		return false;
        	}

        },
        //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用（上传媒体文件功能）
        handleOnChange(file,fileList){
        	console.log('OnChange',file)
        	//file.status = ready || success || fail
        	this.fileList=fileList;
        	if(file.status==='fail'){
        		this._removeFile(file);
        	}else if(file.status==='success'){
        		let data=this.data,
        			files=[];
        		this.fileList.forEach(item=>{
        			if(item.id){
        				files.push(item.id);
        			}else if(item.response&&item.response.data&&item.response.data.id){
        				files.push(item.response.data.id);
        			}
        		})
        		data.files=files;
        	}else if(this.fileList.length>this.data.media.mult){
        		console.log(this.fileList.length,this.data.media.mult)
        		this.$message({
        			type:'warning',
        			message:'最多仅可上传个'+this.data.media.mult+'文件',
        		});
        		this._removeFile(file);
        	}
        	console.log(this.data.files)
        },
	    // 文件上传成功（上传媒体文件功能）
        handleSuccess(res,file,fileList){
        	let type='success';
        	if(res.status){
        		type="warning";
        		this._removeFile(file,fileList);
        	}
        	if(res.msg){
        		this.$message({
        			type,
        			message:res.msg,
        		})
        	}

        	
        },
        // 移除文件列表（上传媒体文件功能）
        _removeFile(file,fileList){
        	fileList=fileList||this.fileList;
        	let index =fileList.indexOf(file);
        	if(index>=0){
        		fileList.splice(index, 1);
        		if(file.id){
        			let data=this.data;
        			let i=data.files.indexOf(file.id);
        			data.files.splice(i, 1);
        		}else if(file.response&&file.response.data&&file.response.data.id){
        			let data=this.data;
        			let i=data.files.indexOf(file.response.data.id);
        			data.files.splice(i, 1);
        		}
        	}
        	
        },
		initOptions(options){
			this.options=Object.assign({
				device:{ //设备选择
					soft:false, //微信号选择
					social:false, //好友选择
				},
				title:true, //标题
				loop:false, //循环任务
				source:true, //选择素材
				sex:true, //性别
				map:true, //城市选择
				interval:{ //操作间隔
					show:true, 
					default:1, //默认值 单位：s
					title:'操作间隔', //标题
				},
				limit:{ //次数限定
					show:true, 
					default:5, //默认值
					title:'打招呼次数', //标题
				},
				count:{ //数量限定
					show:true, 
					default:5, //默认值
					title:'接受请求数量', //标题
				},
				msg:{ //文字内容
					show:true, //是否显示
					mult:false, //是否多行
					title:'文字内容', //标题
					placeholder:'请输入内容', //占位符
				},
				number:{ //微信号、手机号、QQ号等
					show:true, //是否显示
					mult:true, //是否多行
					mine:true, //是否导入我的账号库
					excel:true, //是否开启账号导入
					title:'微信号', //标题
					placeholder:'微信号、QQ号、手机号、 使用‘|’分隔', //占位符
				},
				media:{ //媒体文件上传
					show:true, //是否显示
					mult:true, //是否允许多条
					media_type:'image', //image、audio、video
					title:'上传图片', //标题
				},
				remark:['键名','说明该属性的作用','默认值','可选值']
			},options);
		}
	}
})
</script>
{/block}